<!DOCTYPE html>
<html lang="en" >
    <!--begin::Head-->
    <head>
        <meta charset="utf-8"/>
        <title>{{ botname }} | Login</title>
        <meta name="description" content="Login page example"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <!--begin::Fonts-->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"/>        <!--end::Fonts-->
                    <!--begin::Page Custom Styles(used by this page)-->
                             <link href="https://cdn.jsdelivr.net/gh/shkongzhu/yowhite@master/assets/css/pages/login/login-1.css?v=7.0.6" rel="stylesheet" type="text/css"/>
                        <!--end::Page Custom Styles-->
        <!--begin::Global Theme Styles(used by all pages)-->
                    <link href="https://cdn.jsdelivr.net/gh/shkongzhu/yowhite@master/assets/plugins/global/plugins.bundle.css?v=7.0.6" rel="stylesheet" type="text/css"/>
                    <link href="https://cdn.jsdelivr.net/gh/shkongzhu/yowhite@master/assets/plugins/custom/prismjs/prismjs.bundle.css?v=7.0.6" rel="stylesheet" type="text/css"/>
                    <link href="https://cdn.jsdelivr.net/gh/shkongzhu/yowhite@master/assets/css/style.bundle.css?v=7.0.6" rel="stylesheet" type="text/css"/>
                <!--end::Global Theme Styles-->
        <!--begin::Layout Themes(used by all pages)-->
                <!--end::Layout Themes-->
        <link rel="shortcut icon" href="{{ url_for('yobot_static', filename='small.ico') }}"/>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
        <script src="{{ url_for('yobot_static', filename='password.js') }}"></script>
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
        <style>
            #app {
                margin: auto;
            }

            .container {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-flow: column;
                max-width: 400px;
            }

            .comment {
                color: #aaa;
                line-height: 20px;
                font-size: 0.8em;
                margin: 20px 0;
            }
        </style>
    </head>
    <!--end::Head-->

    <!--begin::Body-->
    <body  id="kt_body" class="header-fixed header-mobile-fixed subheader-enabled page-loading"  >

    	<!--begin::Main-->
	<div class="d-flex flex-column flex-root">
		<!--begin::Login-->
<div class="login login-1 login-signin-on d-flex flex-column flex-lg-row flex-column-fluid bg-white" id="kt_login">
    <!--begin::Aside-->
    <div class="login-aside d-flex flex-column flex-row-auto" style="background-color: #F2C98A;">
        <!--begin::Aside Top-->
        <div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15">
            <!--begin::Aside header-->
            <a href="#" class="text-center mb-10">
				<img src="{{ url_for('yobot_static', filename='small.ico') }}" class="max-h-70px" alt=""/>
			</a>
            <!--end::Aside header-->

            <!--begin::Aside title-->
            <h3 class="font-weight-bolder text-center font-size-h4 font-size-h1-lg" style="color: #986923;">
                Sign In<br/>
                Your Bot
            </h3>
            <!--end::Aside title-->
        </div>
        <!--end::Aside Top-->

        <!--begin::Aside Bottom-->
        <div class="aside-img d-flex flex-row-fluid bgi-no-repeat bgi-position-y-bottom bgi-position-x-center" style="background-image: url(https://static.shkong.com/templates/met_11/assets/media/svg/illustrations/login-visual-1.svg)"></div>
        <!--end::Aside Bottom-->
    </div>
    <!--begin::Aside-->

    <!--begin::Content-->
    <div class="login-content flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto" id="app">
        <!--begin::Content body-->
        <div class="d-flex flex-column-fluid flex-center">
            <!--begin::Signin-->
            <div class="login-form login-signin">
                <!--begin::Form-->
                <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form">
                    <div class="pb-13 pt-lg-0 pt-5">
                        <h3 class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg">登录</h3>
                    </div>
                    {% if reason -%}
                    <div class="alert alert-custom alert-outline-2x alert-outline-danger fade show mb-5" role="alert">
                        <div class="alert-icon"><i class="flaticon-warning"></i></div>
                        <div class="alert-text">{{ reason }}</div>
                        <div class="alert-close">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true"><i class="ki ki-close"></i></span>
                            </button>
                        </div>
                    </div>
                    {% endif -%}
                    {% if advice -%}
                    <div class="alert alert-custom alert-outline-2x alert-outline-primary fade show mb-5" role="alert">
                        <div class="alert-icon"><i class="flaticon-warning"></i></div>
                        <div class="alert-text">{{ advice }}</div>
                        <div class="alert-close">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true"><i class="ki ki-close"></i></span>
                            </button>
                        </div>
                    </div>
                    {% endif -%}
                    <el-form-item label="QQ号" prop="qq" class="form-group">
                        <el-input v-model="form.qq" name="user" placeholder="请输入登录QQ号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input v-model="form.pwd" name="password" placeholder="这个密码不是QQ密码" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
                <!--end::Form-->
            </div>
            <!--end::Signin-->
        </div>
        <!--end::Content body-->
    </div>
    <!--end::Content-->
</div>
<!--end::Login-->
	</div>
<!--end::Main-->
        <!--begin::Global Config(global config for global JS scripts)-->
        <script>
            var KTAppSettings = {
    "breakpoints": {
        "sm": 576,
        "md": 768,
        "lg": 992,
        "xl": 1200,
        "xxl": 1200
    },
    "colors": {
        "theme": {
            "base": {
                "white": "#ffffff",
                "primary": "#6993FF",
                "secondary": "#E5EAEE",
                "success": "#1BC5BD",
                "info": "#8950FC",
                "warning": "#FFA800",
                "danger": "#F64E60",
                "light": "#F3F6F9",
                "dark": "#212121"
            },
            "light": {
                "white": "#ffffff",
                "primary": "#E1E9FF",
                "secondary": "#ECF0F3",
                "success": "#C9F7F5",
                "info": "#EEE5FF",
                "warning": "#FFF4DE",
                "danger": "#FFE2E5",
                "light": "#F3F6F9",
                "dark": "#D6D6E0"
            },
            "inverse": {
                "white": "#ffffff",
                "primary": "#ffffff",
                "secondary": "#212121",
                "success": "#ffffff",
                "info": "#ffffff",
                "warning": "#ffffff",
                "danger": "#ffffff",
                "light": "#464E5F",
                "dark": "#ffffff"
            }
        },
        "gray": {
            "gray-100": "#F3F6F9",
            "gray-200": "#ECF0F3",
            "gray-300": "#E5EAEE",
            "gray-400": "#D6D6E0",
            "gray-500": "#B5B5C3",
            "gray-600": "#80808F",
            "gray-700": "#464E5F",
            "gray-800": "#1B283F",
            "gray-900": "#212121"
        }
    },
    "font-family": "Poppins"
};
        </script>
        <!--end::Global Config-->
        <script>
    new Vue({
        el: '#app',
        data: {
            form: {
                qq: "",
                pwd: ""
            },
            rules: {
                qq: [
                    {required: true, message: '必须输入您的QQ号', trigger: 'blur'}
                ],
                pwd: [
                    {required: true, message: '必须输入您的密码', trigger: 'blur'},
                ],
            }
        },
        methods() {
            if (localStorage.login_qqid) {
                this.form.qq = String(localStorage.login_qqid);
            }
        },
        methods: {
            post: function (url, params) {
                //创建form表单
                const temp_form = document.createElement("form");
                temp_form.action = url;
                //如需打开新窗口，form的target属性要设置为'_blank'
                // temp_form.target = "_blank";
                temp_form.method = "post";
                temp_form.style.display = "none";
                //添加参数
                for (const key in params) {
                    const opt = document.createElement("textarea");
                    opt.name = key;
                    opt.value = params[key];
                    temp_form.appendChild(opt);
                }
                document.body.appendChild(temp_form);
                //提交数据
                temp_form.submit();
            },
            onSubmit: function () {
                localStorage.login_qqid = this.form.qq;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const url = "{{ url_for('yobot_login') }}";
                        this.post(url, {
                            qqid: this.form.qq,
                            pwd: getHashWithSalt(this.form.pwd + this.form.qq)
                        });
                    } else {
                        console.log('请检查输入！');
                        return false;
                    }
                });
            }
        }
    })
</script>
    	<!--begin::Global Theme Bundle(used by all pages)-->
    	    	   <script src="https://cdn.jsdelivr.net/gh/shkongzhu/yowhite@master/assets/plugins/global/plugins.bundle.js?v=7.0.6"></script>
		    	   <script src="https://cdn.jsdelivr.net/gh/shkongzhu/yowhite@master/assets/plugins/custom/prismjs/prismjs.bundle.js?v=7.0.6"></script>
		    	   <script src="https://cdn.jsdelivr.net/gh/shkongzhu/yowhite@master/assets/js/scripts.bundle.js?v=7.0.6"></script>
				<!--end::Global Theme Bundle-->


                    <!--begin::Page Scripts(used by this page)-->
                            <script src="https://cdn.jsdelivr.net/gh/shkongzhu/yowhite@master/assets/js/pages/custom/login/login-general.js?v=7.0.6"></script>
                        <!--end::Page Scripts-->
            </body>
    <!--end::Body-->
</html>
